.current-alert {
  position: relative;
  display: flex;
  align-items: center;
  user-select: none;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  .horn-item{
    position: absolute;
    width: 8px;
    height: 8px;
  }
  .left-top{
    top: 0;
    left: 0;
    border-left: 2px solid #008BFF;
    border-top: 2px solid #008BFF;
  }
  .right-top{
    top: 0;
    right: 0;
    border-right: 2px solid #008BFF;
    border-top: 2px solid #008BFF;
  }
  .right-bottom{
    bottom: 0;
    right: 0;
    border-right: 2px solid #008BFF;
    border-bottom: 2px solid #008BFF;
  }
  .left-bottom{
    bottom: 0;
    left: 0;
    border-left: 2px solid #008BFF;
    border-bottom: 2px solid #008BFF;
  }
  // 背景容器
  .alert-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // 460px × 50px, rgba(66,106,144,0.29)
    background: var(--background-color);
    opacity: var(--background-opacity);
    border-radius: 4px;
    transition: all 0.3s ease;
  }

  // 预警图标
  .alert-icon {
    position: absolute;
    // 位置 3606px 903px (相对于3437px, 894px): 3606-3437=169px, 903-894=9px
    left: 169px;   // 169px from left edge
    top: 9px;      // 9px from top edge
    // 大小 32px 32px
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: var(--icon-opacity);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
    &:hover {
      transform: scale(1.1);
      filter: brightness(1.2);
    }

    &:active {
      transform: scale(1.05);
    }
  }

  // 预警文字
  .alert-text {
    position: absolute;
    // 位置 3646px 907px (相对于3437px, 894px): 3646-3437=209px, 907-894=13px
    left: 209px;   // 209px from left edge
    top: 13px;     // 13px from top edge
    // 大小 83px 24px
    width: 83px;
    height: 24px;
    // SourceHanSansSC Medium, 16px, #00FFF1, 左对齐, 行高24px, 字间距0.57px
    font-family: SourceHanSansSC, sans-serif;
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;

    &:hover {
      filter: brightness(1.2);
      transform: scale(1.02);
      text-shadow: 0px 0px 8px rgba(0, 255, 241, 0.5);
    }

    &:active {
      transform: scale(1);
    }
  }

  // 悬停效果
  &:hover {
    transform: translateY(-2px);

    .alert-background {
      opacity: calc(var(--background-opacity) + 0.1);
      filter: brightness(1.1);
      box-shadow: 0 4px 12px rgba(66, 106, 144, 0.3);
    }

    .alert-icon {
      filter: brightness(1.3) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
    }

    .alert-text {
      filter: brightness(1.3);
      text-shadow: 0px 0px 12px rgba(0, 255, 241, 0.6);
    }
  }

  &:active {
    transform: translateY(0);
  }

  // 预警状态
  &.none {
    // 无预警状态 - 默认青色
    .alert-text {
      color: #00FFF1;
    }

    .alert-icon {
      filter: hue-rotate(180deg) brightness(1.1);
    }
  }

  &.warning {
    // 预警状态 - 黄色
    .alert-background {
      background: rgba(255, 193, 7, 0.3) !important;
    }

    .alert-text {
      color: #FFC107 !important;
      animation: warningPulse 2s ease-in-out infinite;
      text-shadow: 0px 0px 8px #FF8F00 !important;
    }

    .alert-icon {
      filter: hue-rotate(40deg) brightness(1.3) !important;
      animation: warningBlink 1.5s ease-in-out infinite;
    }
  }

  &.danger {
    // 危险预警状态 - 红色
    .alert-background {
      background: rgba(244, 67, 54, 0.4) !important;
    }

    .alert-text {
      color: #F44336 !important;
      animation: dangerPulse 1s ease-in-out infinite;
      text-shadow: 0px 0px 10px #D32F2F !important;
    }

    .alert-icon {
      filter: hue-rotate(320deg) brightness(1.4) !important;
      animation: dangerShake 0.5s ease-in-out infinite;
    }
  }

  &.normal {
    // 正常状态 - 绿色
    .alert-background {
      background: rgba(76, 175, 80, 0.3) !important;
    }

    .alert-text {
      color: #4CAF50 !important;
      text-shadow: 0px 0px 6px #2E7D32 !important;
    }

    .alert-icon {
      filter: hue-rotate(100deg) brightness(1.2) !important;
    }
  }

  // 主题样式
  &.dark {
    // 默认深色主题
  }

  &.light {
    .alert-background {
      background: rgba(200, 200, 200, 0.6) !important;
    }

    .alert-text {
      color: rgba(0, 0, 0, 0.9) !important;
      text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.8) !important;
    }

    .alert-icon {
      filter: brightness(0.8) contrast(1.2) !important;
    }

    &:hover {
      .alert-text {
        color: rgba(0, 0, 0, 1) !important;
        text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3) !important;
      }

      .alert-icon {
        filter: brightness(1) contrast(1.3) drop-shadow(0 0 6px rgba(0, 0, 0, 0.2)) !important;
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .alert-icon {
      left: 140px;
      top: 8px;
      width: 28px;
      height: 28px;
    }

    .alert-text {
      left: 175px;
      top: 12px;
      width: 75px;
      height: 22px;
      font-size: 14px !important;
      line-height: 22px !important;
    }
  }

  @media (max-width: 480px) {
    .alert-icon {
      left: 120px;
      top: 7px;
      width: 24px;
      height: 24px;
    }

    .alert-text {
      left: 150px;
      top: 11px;
      width: 65px;
      height: 20px;
      font-size: 12px !important;
      line-height: 20px !important;
      letter-spacing: 0.3px !important;
    }
  }

  // 焦点可访问性
  &:focus {
    outline: 2px solid rgba(0, 255, 241, 0.5);
    outline-offset: 2px;
  }

  .alert-icon:focus,
  .alert-text:focus {
    outline: 2px solid rgba(0, 255, 241, 0.8);
    outline-offset: 2px;
  }

  // 高对比度模式
  @media (prefers-contrast: high) {
    .alert-background {
      opacity: 0.8 !important;
      border: 2px solid rgba(0, 0, 0, 0.5) !important;
    }

    .alert-text {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
      font-weight: bold !important;
    }

    .alert-icon {
      filter: contrast(1.5) brightness(1.2) !important;
    }
  }

  // 减少动画
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition: none !important;
      transform: none !important;
      animation: none !important;
    }

    &:hover {
      transform: none !important;
    }

    .alert-icon:hover,
    .alert-text:hover {
      transform: none !important;
    }
  }

  // 数据状态
  &.loading {
    opacity: 0.7;
    pointer-events: none;

    .alert-icon {
      animation: pulse 1.5s ease-in-out infinite;
    }

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 8px;
      width: 12px;
      height: 12px;
      margin-top: -6px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #00FFF1;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      z-index: 10;
    }
  }

  &.success {
    .alert-text {
      color: #4CAF50 !important;
      text-shadow: 0px 0px 6px #2E7D32 !important;
    }

    .alert-icon {
      filter: hue-rotate(100deg) brightness(1.2) !important;
    }
  }

  &.disabled {
    pointer-events: none;
    opacity: 0.5;

    * {
      filter: grayscale(1);
    }
  }

  // 动画关键帧
  @keyframes pulse {
    0%, 100% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes warningPulse {
    0%, 100% {
      transform: scale(1);
      filter: brightness(1);
    }
    50% {
      transform: scale(1.03);
      filter: brightness(1.2);
    }
  }

  @keyframes warningBlink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
      filter: hue-rotate(40deg) brightness(1.5) !important;
    }
  }

  @keyframes dangerPulse {
    0%, 100% {
      transform: scale(1);
      filter: brightness(1);
    }
    50% {
      transform: scale(1.05);
      filter: brightness(1.4);
    }
  }

  @keyframes dangerShake {
    0%, 100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-2px);
    }
    75% {
      transform: translateX(2px);
    }
  }

  // 特殊效果
  &.enhanced {
    &::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, transparent, rgba(0, 255, 241, 0.3), transparent);
      border-radius: 6px;
      z-index: -1;
      animation: borderFlow 3s linear infinite;
    }

    .alert-text {
      animation: textGlow 2s ease-in-out infinite;
    }

    .alert-icon {
      animation: iconGlow 2s ease-in-out infinite;
    }
  }

  @keyframes borderFlow {
    0% {
      transform: rotate(0deg);
      opacity: 0.5;
    }
    100% {
      transform: rotate(360deg);
      opacity: 0.5;
    }
  }

  @keyframes textGlow {
    0%, 100% {
      text-shadow: 0px 0px 4px rgba(0, 255, 241, 0.3);
    }
    50% {
      text-shadow: 0px 0px 12px rgba(0, 255, 241, 0.8), 0px 0px 20px rgba(0, 255, 241, 0.4);
    }
  }

  @keyframes iconGlow {
    0%, 100% {
      filter: brightness(1) drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
    }
    50% {
      filter: brightness(1.3) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
    }
  }

  // 错误状态
  &.error {
    &::after {
      content: '连接异常';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255, 0, 0, 0.9);
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 500;
      z-index: 15;
    }

    .alert-text {
      color: #F44336 !important;
      text-decoration: line-through;
    }

    .alert-icon {
      filter: grayscale(1) brightness(0.5) !important;
    }
  }

  // 更新状态
  &.updating {
    .alert-text {
      animation: updateAnimation 0.8s ease-in-out;
    }

    .alert-icon {
      animation: iconUpdate 1s ease-in-out;
    }
  }

  @keyframes updateAnimation {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.02);
      opacity: 0.7;
      filter: brightness(1.3);
    }
  }

  @keyframes iconUpdate {
    0%, 100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
    50% {
      transform: scale(1.1) rotate(180deg);
      opacity: 0.8;
      filter: brightness(1.2);
    }
  }

  // 预警等级指示
  &.level-1 {
    .alert-background {
      background: rgba(33, 150, 243, 0.3) !important;
    }

    .alert-text {
      color: #2196F3 !important;
      text-shadow: 0px 0px 6px #1976D2 !important;
    }
  }

  &.level-2 {
    .alert-background {
      background: rgba(255, 193, 7, 0.3) !important;
    }

    .alert-text {
      color: #FFC107 !important;
      text-shadow: 0px 0px 6px #FF8F00 !important;
    }
  }

  &.level-3 {
    .alert-background {
      background: rgba(255, 152, 0, 0.4) !important;
    }

    .alert-text {
      color: #FF9800 !important;
      text-shadow: 0px 0px 8px #F57C00 !important;
      animation: level3Pulse 1.5s ease-in-out infinite;
    }
  }

  &.level-4 {
    .alert-background {
      background: rgba(244, 67, 54, 0.5) !important;
    }

    .alert-text {
      color: #F44336 !important;
      text-shadow: 0px 0px 10px #D32F2F !important;
      animation: level4Pulse 1s ease-in-out infinite;
    }

    .alert-icon {
      animation: level4Shake 0.3s ease-in-out infinite;
    }
  }

  @keyframes level3Pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.8;
      filter: brightness(1.3);
    }
  }

  @keyframes level4Pulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.05);
      opacity: 0.7;
      filter: brightness(1.5);
    }
  }

  @keyframes level4Shake {
    0%, 100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-1px);
    }
    75% {
      transform: translateX(1px);
    }
  }

  // 实时监控状态
  &.monitoring {
    .alert-text {
      animation: monitoringText 3s ease-in-out infinite;
    }

    .alert-icon {
      animation: monitoringIcon 2s ease-in-out infinite;
    }

    &::before {
      content: '';
      position: absolute;
      top: 2px;
      right: 2px;
      width: 6px;
      height: 6px;
      background: #00FFF1;
      border-radius: 50%;
      animation: monitoringPulse 1.5s ease-in-out infinite;
      z-index: 10;
    }
  }

  @keyframes monitoringText {
    0%, 100% {
      filter: brightness(1);
    }
    50% {
      filter: brightness(1.2) hue-rotate(10deg);
    }
  }

  @keyframes monitoringIcon {
    0%, 100% {
      filter: brightness(1);
    }
    50% {
      filter: brightness(1.3) saturate(1.2);
    }
  }

  @keyframes monitoringPulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.5;
      transform: scale(1.5);
    }
  }
}
